<template>
	<view>
		<view class="container"
			style="width:450rpx; height: 750rpx; background-color: #ccc; position: relative;margin:30rpx auto;">
			<view class="draggable" :style="{top: dragY + 'rpx'}" @touchstart="onTouchStart" @touchmove="onTouchMove"
				@touchend="onTouchEnd">
				<!-- 可拖动的内容 -->
				<view class="draggable-text">
					点击拖动到合适的位置
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				dragY: 0, // 记录拖动的垂直位移
				startY: 0, // 记录触摸起始位置
				dragging: false // 是否正在拖动
			};
		},
		methods: {
			onTouchStart(event) {
				// 记录触摸起始位置
				this.startY = event.touches[0].clientY;
				this.dragging = true;
			},
			onTouchMove(event) {
				if (!this.dragging) return;
				// 计算拖动的垂直位移
				const deltaY = event.touches[0].clientY - this.startY;
				// 更新拖动的垂直位移，但不能超出容器范围
				this.dragY = Math.min(750 - 100, Math.max(0, this.dragY + deltaY)); // 100是可拖动元素的高度
				// 更新触摸起始位置
				this.startY = event.touches[0].clientY;
			},
			onTouchEnd() {
				this.dragging = false;
			}
		}
	};
</script>

<style>
	.container {
		position: relative;
	}

	.draggable {
		position: absolute;
	}

	.drag-content {
		width: 300rpx;
		height: 100rpx;
		background-color: yellow;
	}

	.draggable-text {
		width: 450rpx;
		height: 100rpx;
		line-height: 100rpx;
		background-color: red;
		color: #fff;
		font-size: 30rpx;
		text-align: center;
	}
</style>